<template>
    <div>
        <div id="container"></div>
    </div>

</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
    name: "LittleGaoDeMap",
    props: {
        gaodeStations: {
            type: Array,
            default: []
        }
    },
    watch: {
        // 监听 items 数组的变化
        gaodeStations: {
            handler(newItems, oldItems) {
                // console.log('items 发生了变化');
                // console.log('新值:', newItems);
                // console.log('旧值:', oldItems);
                this.showStataionPoint();

                // 在这里可以执行一些操作，例如更新 UI 或发送请求
            },
            deep: true, // 深度监听，监听数组内部对象的变化
            immediate: false // 是否在初始绑定时就执行一次 handler
        }
    },
    mounted() {
        this.initAMap();
    },
    unmounted() {
        this.map?.destroy();
    },
    data() {
        return {
            map: null, // 用于存储地图实例
            ruler: null
        };
    },
    methods: {
        clikcRuler() {
            this.ruler.turnOn();
        },
        initAMap() {
            window._AMapSecurityConfig = {
                securityJsCode: "1bf2b385f0c84322da5e2078076e5baa",
            };
            AMapLoader.load({
                key: "32318674389174577b90b86620722bfa", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
            })
                .then((AMap) => {
                    this.map = new AMap.Map("container", {
                        // 设置地图容器id
                        viewMode: "2D", // 是否为3D地图模式
                        mapStyle: 'amap://styles/fresh', //设置地图的显示样式
                        zoom: 5, // 初始化地图级别
                        center: [104.06, 30.67], // 初始化地图中心点位置
                    });

                })
                .catch((e) => {
                    console.log(e);
                });
        },
        showStataionPoint() {
            var markers = [];
            var stationList = this.gaodeStations;
            for (var i = 0; i < stationList.length; i++) {
                var station = stationList[i];
                // 创建标记
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(station.lon, station.lat), // 标记的位置
                    title: station.stationName, // 鼠标悬停显示的标题
                    extData: station // 自定义数据
                });
                markers.push(marker);

                // 为标记添加点击事件
                marker.on("click", (e) => {
                    this.clickPoint(e);
                });

                // 根据 station.bufferRange 绘制圆形
                if (station.bufferRange) {
                    var circle = new AMap.Circle({
                        center: new AMap.LngLat(station.lon, station.lat), // 圆心位置
                        radius: station.bufferRange, // 半径，单位米
                        strokeColor: "red", // 边线颜色
                        strokeOpacity: 1, // 边线透明度
                        strokeWeight: 2, // 边线宽度
                        fillColor: "rgba(255, 0, 0, 0.5)", // 填充颜色（红色背景，50% 透明度）
                        fillOpacity: 0.5, // 填充透明度
                        zIndex: 50
                    });
                    this.map.add(circle);
                }
            }
            // 将标记添加到地图上
            this.map.add(markers);
        },
        clickPoint(e) {
            // 获取标记的自定义数据
            const markerData = e.target.getExtData();

            // 创建信息窗体内容
            var infoContent = `
        <div class="info-window">
            <h3>${markerData.stationName}</h3>
            经度: ${markerData.lon}<br/>
            纬度: ${markerData.lat}<br/>
            地址：${markerData.address || '无'}<br/>
            监测时间: ${markerData.monitorTime || '无'}
        </div>
    `;

            // 创建信息窗体
            var infoWindow = new AMap.InfoWindow({
                content: infoContent, // 信息窗体内容
                offset: new AMap.Pixel(0, -10), // 信息窗体偏移量
                autoMove: true, // 自动调整位置
                closeWhenClickMap: true // 点击地图关闭窗体
            });

            // 打开信息窗体
            infoWindow.open(this.map, e.target.getPosition());
        }
    },
};
</script>
<style scoped>
#container {
    width: 100%;
    height: 400px;
}
</style>